<template>
  <div class="app-container">
    <el-form ref="refForm" :inline="true" :model="filters" class="demo-form-inline filter-container">
      <el-form-item label="有效时间">
        <el-date-picker
          v-model="filters.time"
          class="filter-item"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="['00:00:00', '23:59:59']"
          value-format="yyyy-MM-dd HH:mm:ss"
          unlink-panels
          align="right">
        </el-date-picker>
      </el-form-item>

      <el-form-item label="素材类型:" prop="materialType">
        <el-select v-model="filters.materialType">
          <el-option v-for="item in consts.EXTENSION_TYPE"
                     v-if="item.value !== -1"
                     :key="item.value"
                     :label="item.title"
                     :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="素材尺寸:" prop="materialSize">
        <el-select v-model="filters.materialSize">
          <el-option v-for="item in consts.EXTENSION_SIZE"
                     :key="item.value"
                     :label="item.title"
                     :value="item.value == -1?-1:item.title">
          </el-option>
        </el-select>
      </el-form-item>

      <!--<el-form-item label="显示端：" prop="showClient">-->
        <!--<el-select v-model="filters.showClient">-->
          <!--<el-option v-for="item in consts.DEVICE_TYPE"-->
                     <!--:key="item.value"-->
                     <!--:label="item.title"-->
                     <!--:value="item.value">-->
          <!--</el-option>-->
        <!--</el-select>-->
      <!--</el-form-item>-->

      <!--<el-form-item label="状态：" prop="status">-->
        <!--<el-select v-model="filters.status">-->
          <!--<el-option v-for="item in consts.AD_STATUS"-->
                     <!--v-if="item.value !== 3"-->
                     <!--:key="item.value"-->
                     <!--:label="item.title"-->
                     <!--:value="item.value">-->
          <!--</el-option>-->
        <!--</el-select>-->
      <!--</el-form-item>-->
      <el-button type="primary" v-waves icon="el-icon-search" @click="submitFilterForm(filters)">搜索</el-button>
      <el-button @click="selfResetForm">重置</el-button>
    </el-form>

    <el-table :data="tableData.list" v-loading="loading" element-loading-text="给我一点时间" border fit
              highlight-current-row
              style="width: 100%">
      <el-table-column label="开始时间" align="center" width="160">
        <template slot-scope="{row}">
          {{row.startTime | toTime}}
        </template>
      </el-table-column>
      <el-table-column label="结束时间" align="center" width="160px">
        <template slot-scope="{row}">
          {{row.endTime | toTime}}
        </template>
      </el-table-column>
      <el-table-column label="素材"  width="160" align="center">
        <template slot-scope="{row}">
          <div style="width: 160px;height: 120px;overflow: hidden;">
            <img :src="row.imageUrl" style="max-width: 100%;"/>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="素材类型" align="center" prop="materialType">
        <template slot-scope="{row}">
          {{row.materialType | toConverter('EXTENSION_TYPE')}}
        </template>
      </el-table-column>
      <el-table-column label="素材尺寸" align="center" prop="materialSize">
      </el-table-column>
      <el-table-column label="添加人" align="center" prop="creator">
      </el-table-column>
      <!--<el-table-column label="显示端" align="center">-->
        <!--<template slot-scope="{row}">-->
          <!--{{row.clientType | toConverter('PAYMENT_PLATFORM') }}-->
        <!--</template>-->
      <!--</el-table-column>-->
      <el-table-column label="操作" align="center">
        <template slot-scope="{row}">
          <el-button v-if="roleCheck('del')" type="text" @click="handleDelete(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination background @size-change="gridSizeChange" @current-change="gridCurrentChange"
                     :current-page="filters.page" :page-sizes="gridPageSize" :page-size="filters.size"
                     :layout="gridLayout" :total="tableData.total">
      </el-pagination>
    </div>

    <el-dialog :visible.sync="dialogVisible" :before-close="() => {dialogVisible = false}">
      <material-edit style="max-height:60vh; overflow: auto"
                        :id="dialogProps.id"
                        :row-data="dialogProps"
                  @on-success="dialogVisible = false;doGet({action: 'getGrid'})"
                  v-if="dialogName === 'advertising-edit'"/>
    </el-dialog>
  </div>
</template>

<script>
  import {form, grid, dialog} from '@/build';

  import {
    marketingMaterialDeleteApi as deleteApi,
    marketingMaterialListApi as listApi,
  } from '@/services/api/marketing';
  import MaterialEdit from "./edit";


  export default {
    name: 'material-list',

    mixins: [form, grid, dialog],

    components: {
      MaterialEdit
    },

    data() {
      const fromDate = moment(consts.ONLINE_DATE).format('YYYY-MM-DD 00:00:00');
      const endDate = moment ().format('YYYY-MM-DD 23:59:59');
      return {
        tableData: {
          list: [],
          total: 0
        },
        filters: {
          time: [
            fromDate,
            endDate,
          ],
          status: consts.ALL,
          page: 1,
          size: 20,
          startTime:fromDate,
          endTime: endDate,
          materialType: undefined,
          showClient: undefined,
          materialSize: undefined,
        },
        filterDateType: false,
      }
    },

    methods: {
      handleDelete({id}) {
        this.$confirm(`确定要删除此素材吗？`, '删除素材', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteApi({
            id,
          }).then(([result, data]) => {
            if (result) {
              this.doGet({action: 'getGrid'});
              this.$message({
                type: 'success',
                message: `删除成功!`
              });
            } else {
              this.$message({
                type: 'error',
                message: `删除失败!${data.message}`
              });
            }
          });
        })
          .catch(() => {
          })
      },

      selfResetForm(){
        this.resetForm('refForm');
        this.gridSearch();
      }

    },

    mounted() {
      this.bindGet(listApi, 'tableData', {
        action: 'getGrid',
        sendingData: 'filters'
      });

      this.getAll();
    }
  }
</script>
